<template>
  <el-dropdown placement="top-end" @command="command">
    <div class="user-avatar-wrap" style="">
      <img class="user-avatar" :src="imgUrl+props.userInfo.userImg" :alt="props.userInfo.username">
    </div>
    <template #dropdown>
      <el-dropdown-menu >
        <el-dropdown-item v-for="(item,index) in menu" :key="item.id" :command="item.command">
          {{ item.name }}
        </el-dropdown-item>

      </el-dropdown-menu>
    </template>

  </el-dropdown>
</template>

<script setup>
import {menu} from "@/assets/js/nav.js";
import {defineProps, getCurrentInstance, defineEmits} from "vue";
import {useRouter} from "vue-router";

const router = useRouter()
const props = defineProps(['userInfo']);
const imgUrl = getCurrentInstance()?.appContext.config.globalProperties.$imgUrl
//退出登录
const emits = defineEmits(['logoutHandler']);
const command = value => {
  if (value === 'logout') {
    emits('logoutHandler', 'logout')
  } else if (value === 'profileName') {

  }else {
    router.push(value)
  }
}
</script>

<style scoped>
.user-avatar-wrap {
  border: none;
  position: absolute;
}

.user-avatar {
  width: 55px;
  height: 55px;
  border-radius: 100%;
}

</style>
